<template>
    <div>
        <el-submenu v-for="(item,index) in navList" :key="index" v-if="item.children !=null" :index="index.toString()">
            <template slot="title">
                <i :class="item.icon"></i>
                <span>{{item.name}}</span>
            </template>
            <NavMenu :navList="item.children"></NavMenu>
        </el-submenu>
      <el-menu  @open="handleOpen"  router="true" @close="handleClose" :collapse="isCollapse"  background-color="#20222a" text-color="#bdbdc0">
        <el-submenu index="1" v-if="roleCode =='admin'">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">系统管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item  index="/user" v-if="roleCode =='admin'">用户管理</el-menu-item>
            <el-menu-item index="/role" v-if="roleCode =='admin'">角色管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">药品管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item  index="/medicine/info" v-if="roleCode !='emp' " >药品信息</el-menu-item>
            <el-menu-item index="/medicine/overdue">过期药品</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-menu-item index="/patient" v-if="roleCode == 'admin' || roleCode == 'emp' ">
          <i class="el-icon-medal-1"></i>
          <span slot="title">病人管理</span>
        </el-menu-item>
      </el-menu>
    </div>
</template>

<script>
    export default {
        name: "NavMenu",
        props: ["navList"],
        data() {
            return {
              roleCode: null
            };
        },
        methods: {
          init(){
            const user = JSON.parse(window.localStorage.getItem("user"));
            this.roleCode = user.roleCode;
          }
        },
      created() {
          this.init();
      }

    };
</script>
<style lang='scss'>
    //如果没有此样式的话  折叠有子级菜单的父菜单文字是不会隐藏的
    .el-menu--collapse .el-menu-item span,
    .el-menu--collapse .el-submenu .el-submenu__title span {
        height: 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
        display: inline-block;
    }

    // .el-menu{
    //   width: 200px;
    //    .el-submenu__icon-arrow{
    //     opacity: 1;
    //   }
    // }
    // .el-menu--collapse{
    //   width: 60px!important;
    //   .el-submenu__icon-arrow{
    //     opacity: 0;
    //   }
    // }


</style>
